<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
			}
			
			
			div.wh{
				border: 1px solid red;
				width: 150px;
				height: 100px;
				margin: 5px 20px 5px 40px;
				text-align: center;
				line-height: 100px;
				float: left;
			}
			
			#king{
				width: 1000px;
				border: 1px solid red;
				height: 100px;
				margin: 5px 20px 5px 40px;
				text-align: center;
				line-height: 100px;
				color: red;
				font-weight: bold;
			}
			
			#container{
				width: 1100px;
				height: auto;
				margin: 20px auto;
				overflow: hidden;
				border: 3px green solid;
			}
			
			.scott-user-submit{
				margin: 5px auto;
				color: white;
				background-color: #ef5b00;
				height: 50px;
				line-height: 50px;
				text-align: center;
				width: 45%;
				display: block;
				cursor: pointer;
				font-size: 14px;
				font-family: "Microsoft YaHei";
				
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			
			.bg{
				background-color: red;
			}
			
			.yellow{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		
		<div id="container">
			<div id="king">
				刘备
			</div>
			<div class="wh" age='38'>
				关羽
			</div>
			<div class="wh" age='58'>
				张飞
			</div>
			<div class="wh" age='28'>
				赵云
			</div>
			<div class="wh" age='18'>
				马超
			</div>
			<div class="wh" age='68'>
				黄忠
			</div>
		</div>
		
		<input type="button"  class="scott-user-submit" id="findKing" value="寻找皇帝" />
		<input type="button"  class="scott-user-submit" id="findWH"   value="寻找五虎上将" />
		<input type="button"  class="scott-user-submit findMax"       value="寻找年龄最大的五虎上将" />

	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	
	
	<script>
		
		
		$(function(){
			
			
			//寻找最大的老虎
			$('.findMax').click(function(){
				
				console.log('进入寻找最大的老虎...');
				
				
				//1 找到所有的老虎  循环   假设第1只老虎的年龄最大   看第二只  如果 第二只年龄更大。说明要替换? java
				
				
				
				//var whs = document.getElementsByClassName('wh');
				
				var whs = $('.wh');
				
				
				
				
				//var max=0;
				
				var max =0;
				
				
				
				//wh是js对象 面试题
				whs.each(function(index,wh){
					
					//把js对象转化为jQuery对象
					var _wh= $(wh);
					
					
					//var age = wh.getAttribute('age');
					
					var age =_wh.attr('age');
					
					//console.log(age);
					
					age = parseInt(age);
					
					if(age >= max){
						
						max = age;
						
					}
					
				});
				
				console.log('max='+max);
				
				
				whs.each(function(index,wh){
					
					var _wh = $(wh);
					var age =_wh.attr('age');
					
					if(age == max ){
						
						_wh.addClass('yellow');
					}
					
					
				})
				
				
				
				
				
			});
			
			
			
			
			
			//寻找五虎上将
			$('#findWH').click(function(){
				
				var whs = $('.wh');
				
				console.log(whs.length);
				
				
				whs.addClass('bg');
				
				
				//打印出五虎的姓名
				
				//js对象的循环
				var tigers = document.getElementsByClassName('wh');
				console.log('tigers.length='+tigers.length);
				for(var index=0; index<tigers.length;index++){
					var tiger =tigers[index];
					console.log(tiger.innerText);
				}
				
				//jQuery对象如何循环  
				whs.each(function(index,data){
					console.log('index='+index + ', content='+data.innerText);
				});
				
				
				
			});
			
			
			
			//寻找皇帝
			$('#findKing').click(function(){
				
				$('#king').addClass('yellow');
			});
		});
		
	</script>
</html>
